<template>
  <div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      offset="1"
      @load="onLoad"
      :immediate-check="false"
    >
      <van-cell
        v-for="item in gList"
        :key="item"
        class="cell"
        @click="detail(item)"
      >
        <img :src="item.imgURL[0]" />
        <p class="productName">{{ item.productName }}</p>
        <p class="productName2">{{ item.title }}</p>
        <span class="price">￥{{ item.currentPrice }}</span>
        <span class="discount">8.8折券</span>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
let timer = null;
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      gList: [],
      loading: false,
      finished: false,
      pagenum: 1,
    };
  },

  // 请求商品列表数据

  // 从state里拿到goodsList: []
  computed: mapState("store", ["goodsList"]),
  async mounted() {
    await this.getGoodsData({ pagenum: 1 });
    this.gList = this.goodsList;
  },
  methods: {
    ...mapActions("store", ["getGoodsData"]),
    // 上啦加载
    onLoad() {
      clearTimeout(timer);
      timer = setTimeout(async () => {
        await this.getGoodsData({ pagenum: ++this.pagenum });
        this.gList.splice(this.gList.length, 0, ...this.goodsList);
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.gList.length >= 30) {
          this.finished = true;
        }
      }, 1000);
    },
    // 点击商品跳转细节
    detail(item) {
      this.$router.push("/detail/" + item.productId);
    },
    // 按钮绑定
  },
};
</script>
<style lang="less">
.cm-main {
  background-color: #f7f8fa;
  ul {
    width: 100%;
    color: #151e27;
    height: 30px;
    // border: 1px solid red;
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    color: #adadad;
  }
}
// 宠名优选 下面四个切换
.cm {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 16px;
  font-weight: 800;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  margin-bottom: 5px;
  background-color: #f7f8fa;
}

// 商品列表
.van-list {
  font-size: 13px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 5px 5px;
  background-color: #f7f8fa;
}
.van-cell {
  padding: 0;
}
.cell {
  width: 48%;
  height: 305px;
  background-color: #fff;
  box-sizing: border-box;
  margin-top: 10px;
  img {
    width: 100%;
    height: 170px;
  }
  .productName {
    font-size: 14px;
    color: #151e27;
    font-weight: bolder;
    width: 170px;
    height: 40px;
    line-height: 1.35;
    box-sizing: border-box;
    padding: 0 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    border: 1px solid #fff;
  }
  .productName2 {
    font-size: 13px;
    color: #adafb1;
    margin-bottom: 10px;
    padding: 0px 10px;
    margin-top: 10px;
    line-height: 1.2;
  }
  .price {
    font-size: 15px;
    color: #ff2142;
    padding: 0px 10px;
  }
  .discount {
    text-align: center;
    font-size: 10px;
    width: 41px;
    height: 16px;
    background-color: #ff2142;
    color: #fff;
    border-radius: 5px;
    padding: 2px 5px 2px 5px;
  }
}
</style>
